<!--
 * @Author: ChenDong 1516216399@qq.com
 * @Date: 2024-07-03 15:09:08
 * @LastEditors: ChenDong 1516216399@qq.com
 * @LastEditTime: 2024-07-04 14:23:03
 * @FilePath: \武汉实习\elementplus\index.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 导入Elementplus Css样式 -->
    <link rel="stylesheet" href="../../css/element-plus.css">
    <style>
         .el-aside {
            height: 90vh;
        } 
        .el-col-12{
            max-width: 100%;
            flex:1 0 50%;
        }

    </style>
</head>
<div id="app">
    <div class="main">
        <!-- 面包屑 breadcrumb -->
       <div>
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item ><a href="index.html">项目主页</a> </el-breadcrumb-item>
                                <el-breadcrumb-item><a href="page2.html">图表数据</a></el-breadcrumb-item>

                              </el-breadcrumb>
        </div>
        <div style="margin-top: 20px;">
            <el-row>
<!--                <el-col :span="10" >-->
<!--                    <el-card>-->
<!--                        <div id="chart1" style="width: 480px; height: 300px;">-->

<!--                        </div>-->
<!--                    </el-card>-->

<!--                </el-col>-->
                <el-col :span="14" >
                    <el-card>
                        <div id="chart2" style="width: 560px; height: 300px;">

                        </div>
                    </el-card>
                </el-col>
            </el-row>
            
            

        </div>
        <div class="tit"><h3>热度统计</h3></div>
        <div id="global_hn_statistic" class="tab">
            <table style="border-collapse: collapse; width: 100%;">
                <thead>
                <tr style="background-color: #f2f2f2;">
                    <th style="padding: 8px; text-align: left;">热度段</th>
                    <th style="padding: 8px; text-align: left;">主播数量</th>
                    <th style="padding: 8px; text-align: left;">主播占比</th>
                    <th style="padding: 8px; text-align: left;">总热度</th>
                    <th style="padding: 8px; text-align: left;">总热度占比</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td style="padding: 8px; text-align: left;">100w以上</td>
                    <td style="padding: 8px; text-align: left;">52</td>
                    <td style="padding: 8px; text-align: left;">0.14%</td>
                    <td style="padding: 8px; text-align: left;">95,003,720</td>
                    <td style="padding: 8px; text-align: left;">5.95%</td>
                </tr>
                <tr>
                    <td style="padding: 8px; text-align: left;">100w~50w</td>
                    <td style="padding: 8px; text-align: left;">163</td>
                    <td style="padding: 8px; text-align: left;">0.43%</td>
                    <td style="padding: 8px; text-align: left;">105,098,937</td>
                    <td style="padding: 8px; text-align: left;">6.58%</td>
                </tr>
                <tr>
                    <td style="padding: 8px; text-align: left;">50w~10w</td>
                    <td style="padding: 8px; text-align: left;">2,516</td>
                    <td style="padding: 8px; text-align: left;">6.59%</td>
                    <td style="padding: 8px; text-align: left;">497,715,936</td>
                    <td style="padding: 8px; text-align: left;">31.15%</td>
                </tr>
                <tr>
                    <td style="padding: 8px; text-align: left;">10w~1w</td>
                    <td style="padding: 8px; text-align: left;">23,630</td>
                    <td style="padding: 8px; text-align: left;">61.9%</td>
                    <td style="padding: 8px; text-align: left;">896,583,616</td>
                    <td style="padding: 8px; text-align: left;">56.11%</td>
                </tr>
                <tr>
                    <td style="padding: 8px; text-align: left;">1w~5k</td>
                    <td style="padding: 8px; text-align: left;">401</td>
                    <td style="padding: 8px; text-align: left;">1.05%</td>
                    <td style="padding: 8px; text-align: left;">3,330,378</td>
                    <td style="padding: 8px; text-align: left;">0.21%</td>
                </tr>
                <tr>
                    <td style="padding: 8px; text-align: left;">5k~1k</td>
                    <td style="padding: 8px; text-align: left;">10</td>
                    <td style="padding: 8px; text-align: left;">0.03%</td>
                    <td style="padding: 8px; text-align: left;">37,983</td>
                    <td style="padding: 8px; text-align: left;">0.0%</td>
                </tr>
                <tr>
                    <td style="padding: 8px; text-align: left;">1k~100</td>
                    <td style="padding: 8px; text-align: left;">0</td>
                    <td style="padding: 8px; text-align: left;">0%</td>
                    <td style="padding: 8px; text-align: left;">0</td>
                    <td style="padding: 8px; text-align: left;">0%</td>
                </tr>
                <tr>
                    <td style="padding: 8px; text-align: left;">100~0</td>
                    <td style="padding: 8px; text-align: left;">11,402</td>
                    <td style="padding: 8px; text-align: left;">29.87%</td>
                    <td style="padding: 8px; text-align: left;">4,111</td>
                    <td style="padding: 8px; text-align: left;">0.0%</td>
                </tr>
                </tbody>
            </table>
        </div>

        <!--表格 table-->
        <!-- <div style="margin-top: 20px;">
            <el-table :data="tableData" style="width: 100%">
            // 这里的el-table组件标签必须要有明确的结束标签，否则就是做出一个单列的效果 
            <el-table-column prop="date" label="日期" width="180" ></el-table-column>
            <el-table-column prop="name" label="姓名" width="180" ></el-table-column>
            <el-table-column prop="address" label="地址" ></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                    >编辑</el-button
                >
                <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button
                >
                </template>
            </el-table-column>
            </el-table>
        </div>  -->
    </div>


</div>

<body>
    <!-- 导入vue框架 -->
    <script src="../../js/v3.2.8/vue.global.prod.js"></script>
    <!-- 导入ElementPlus框架 -->
    <script src="../../js/element-plus.js"></script>
    <!-- 导入Elementplus Icon  -->
    <script src="../../js/element-icons.js"></script>
    <!--导入 Echarts-->
    <script src="../../js/echarts.min.js"></script>
    <script>
        //等待DOM加载完成
        document.addEventListener("DOMContentLoaded",function()
        {


            const chart2Dom = document.querySelector("#chart2")
            if (!chart2Dom) {
                console.error("找不到指定的图表容器 #chart2");
                return;
            }
                fetch("http://localhost:8080/webchatsai_war_exploded/echarts")
                //检查响应是否成功
                .then(response => response.json())
                .then(data =>
                {//解析数据

                    const chart2Option =
                        {
                            title: {
                                text: '活跃观众总数'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data: data.xAxisData
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: data.yAxisData
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name: '活跃观众数',
                                    type: 'line',
                                    stack: 'Total',
                                    data: data.hyData
                                },
                                {
                                    name: '付费礼物',
                                    type: 'line',
                                    stack: 'Total',
                                    data: data.ffData
                                },
                                {
                                    name: '弹幕数',
                                    type: 'line',
                                    stack: 'Total',
                                    data: data.dmData
                                },

                            ]
                        };

                    initEcharts(chart2Dom, chart2Option);

                })
                .catch(error => {
                    console.error("数据获取或解析出错:", error);
                })
        });
            function initEcharts(dom, option)
            {
                //初始化实例
                const domEcharts = echarts.init(dom);
                //设置echarts 实例
                domEcharts.setOption(option);

            }

        // 应用使用element plus 组件
        app.use(ElementPlus);
        // "location" 参数对应<location>
        app.component("location" , ElementPlusIconsVue.Location)
        app.component("document" , ElementPlusIconsVue.Document)
        app.component("icon-menu" , ElementPlusIconsVue.Menu)
        app.component("setting" , ElementPlusIconsVue.Setting)

        //将应用挂载到 #app
        app.mount('#app');
    </script>

</body>

</html>